<template>
  <el-aside class="aside_container flex">
    <el-input placeholder="搜索名称" suffix-icon="el-icon-search" v-model="postName" class="serach_input" size="small">
    </el-input>
    <div class="aside_box">
      <el-tree 
        ref="treeList" 
        accordion 
        highlight-current 
        node-key="id" 
        :data="postTree" 
        :props="defaultProps" 
        :filter-node-method="filterNode" 
        :default-expanded-keys="[defaultExpandedKeys]" 
        :expand-on-click-node="false" 
        @node-click="handleNodeClick">
        <span class="custom-tree-node" slot-scope="{ node }">
          <span>
            {{ node.label }}<i class="iconfontShuzhi icon-yancaozhan"></i>
          </span>
        </span>
      </el-tree>
    </div>
  </el-aside>
</template>

<script>
import { deptTreeSelect, userDeptTreeSelect } from '@/api'
import { EventBus } from '@/utils/eventbus'
export default {
  data () {
    return {
      postTree: [],
      defaultProps: {
        children: 'children',
        label: 'projectPointName',
      },
      postName: '',
      treeChecked: [],
      isShowTree: false,
      defaultExpandedKeys: ''
    }
  },
  watch: {
    postName (val) {
      this.$refs.treeList.filter(val);
    }
  },
  created () {
    this.initPostTree()
  },
  methods: {
    // 初始化树形菜单
    async initPostTree () {
      this.isShowTree = false
      await userDeptTreeSelect().then(res => {
        this.isShowTree = true
        this.postTree = res.data
        this.treeChecked = res.data[0]
        this.defaultExpandedKeys = this.treeChecked.id
        this.$nextTick(() => {
          this.$refs.treeList.setCurrentKey(this.treeChecked.id)
        })
        EventBus.$emit('currentTree',this.treeChecked)         
      })
    },
    // 过滤函数
    filterNode (value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点点击触发事件
    handleNodeClick (data) {
      this.$emit('handleNodeClick', data)
    }
  }
}
</script>